<template>
  <div>
    <h2>条件判断指令</h2>

    <!-- vue提供了两个条件判断指令，分别是 v-show 和 v-if -->
    <!--
相同点:都能够控制元素的显示和隐藏
不同点:
当条件为false的时候
- v-show是通过display:none来让元素隐藏:
- v-if直接把元素移除了，从而让元素隐藏
-->

    <!--如果一个元素，经常切换它的显示隐藏状态，用 v-show 更好 -->
    <!-- 如果起始条件是false，V-show也会创建元素，创建后让元素display:none，所以v-show有更高的初始渲染代价-->
    <q v-show="flag">showkz</q>
    <q v-if="flag">ifkz</q>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true,
    };
  },
};
</script>

<style>
</style>
